<template>
  <!--宠物展示轮播图  -->
  <div>
    <div style="margin: 0 15% 0 15%">
      <el-carousel :interval="5000" arrow="always" width="1108px" height="460px">
        <el-carousel-item v-for="item in imgs" :key="item">
          <img
              :src="item"
              width="100%"
              height="100%"
              alt=""
          >
        </el-carousel-item>
      </el-carousel>
    </div>

    <div id="advantages">
      <div class="container">
        <div class="row mb-4">
          <div class="col-md-4">
            <div class="box clickable d-flex flex-column justify-content-center mb-0 h-100">
              <div class="icon"><i class="fa fa-heart"></i></div>
              <h3><a href="#">爱客户</a></h3>
            </div>
          </div>
          <div class="col-md-4">
            <div class="box clickable d-flex flex-column justify-content-center mb-0 h-100">
              <div class="icon"><i class="fa fa-tags"></i></div>
              <h3><a href="#">服务好</a></h3>
            </div>
          </div>
          <div class="col-md-4">
            <div class="box clickable d-flex flex-column justify-content-center mb-0 h-100">
              <div class="icon"><i class="fa fa-thumbs-up"></i></div>
              <h3><a href="#">让客户满意</a></h3>
            </div>
          </div>
        </div>
        <!-- /.row-->
      </div>
      <!-- /.container-->
    </div>

    <div class="box" style="margin-top: 30px">
      <h1>医疗团队</h1>
    </div>
    <!-- 医疗团队   -->
    <div class="container">
      <div class="product-slider owl-carousel owl-theme owl-loaded owl-drag">
        <!-- /.product-slider-->
        <div class="owl-stage-outer">
          <div class="owl-stage"
               style="transform: translate3d(0px, 0px, 0px); transition: all 0s ease 0s; width: 1554px;">
            <div class="owl-item active" style="width: 222px;">
              <div class="item">
                <div class="product">
                  <div class="flip-container">
                    <div class="flipper">
                      <div class="front"><a href="detail.html"><img src="/images/img/dot1.jpg" alt="" class="img-fluid"
                                                                    style="height: 250px"></a>
                      </div>
                    </div>
                  </div>
                  <div class="text">
                    <h3><a href="detail.html">张三</a></h3>
                  </div>
                </div>
                <!-- /.product-->
              </div>
            </div>
            <div class="owl-item active" style="width: 222px;">
              <div class="item">
                <div class="product">
                  <div class="flip-container">
                    <div class="flipper">
                      <div class="front"><a href="detail.html"><img src="/images/img/dot1.jpg" alt="" class="img-fluid"
                                                                    style="height: 250px"></a>
                      </div>

                    </div>
                  </div>

                  <div class="text">
                    <h3><a href="detail.html">大花</a></h3>
                  </div>
                </div>
                <!-- /.product-->
              </div
              >
            </div>
            <div class="owl-item active" style="width: 222px;">
              <div class="item">
                <div class="product">
                  <div class="flip-container">
                    <div class="flipper">
                      <div class="front"><a href="detail.html"><img src="/images/img/dot1.jpg" alt="" class="img-fluid"
                                                                    style="height: 250px"></a>
                      </div>

                    </div>
                  </div>

                  <div class="text">
                    <h3><a href="detail.html">李四</a></h3>
                  </div>
                </div>
                <!-- /.product-->
              </div>
            </div>
            <div class="owl-item active" style="width: 222px;">
              <div class="item">
                <div class="product">
                  <div class="flip-container">
                    <div class="flipper">
                      <div class="front"><a href="detail.html"><img src="/images/img/dot1.jpg" alt="" class="img-fluid"
                                                                    style="height: 250px"></a>
                      </div>

                    </div>
                  </div>

                  <div class="text">
                    <h3><a href="detail.html">二花</a></h3>
                  </div>
                </div>
                <!-- /.product-->
              </div>
            </div>
            <div class="owl-item active" style="width: 222px;">
              <div class="item">
                <div class="product">
                  <div class="flip-container">
                    <div class="flipper">
                      <div class="front"><a href="detail.html"><img src="/images/img/dot1.jpg" alt="" class="img-fluid"
                                                                    style="height: 250px"></a>
                      </div>

                    </div>
                  </div>

                  <div class="text">
                    <h3><a href="detail.html">三花</a></h3>
                  </div>
                </div>
                <!-- /.product-->
              </div>
            </div>
            <div class="owl-item" style="width: 222px;">
              <div class="item">
                <div class="product">
                  <div class="flip-container">
                    <div class="flipper">
                      <div class="front"><a href="detail.html"><img src="/static/images/userImage/20200127173742.jpg"
                                                                    alt="" class="img-fluid" style="height: 250px"></a>
                      </div>

                    </div>
                  </div>

                  <div class="text">
                    <h3><a href="detail.html">王五</a></h3>
                  </div>
                </div>
                <!-- /.product-->
              </div>
            </div>
            <div class="owl-item" style="width: 222px;">
              <div class="item">
                <div class="product">
                  <div class="flip-container">
                    <div class="flipper">
                      <div class="front"><a href="detail.html"><img src="/static/images/userImage/20200127173856.jpg"
                                                                    alt="" class="img-fluid" style="height: 250px"></a>
                      </div>


                    </div>
                  </div>

                  <div class="text">
                    <h3><a href="detail.html">赵六</a></h3>
                  </div>
                </div>
                <!-- /.product-->
              </div>
            </div>
          </div>
        </div>

        <div class="owl-thumbs"></div>
      </div>
      <!-- /.container-->
    </div>


    <div class="box" style="margin-top: 30px">
      <h1>医疗环境</h1>
    </div>
    <!--医疗环境轮播图-->
    <div style="margin: 0 15% 0 15%">
      <el-carousel :interval="5000" arrow="always" width="1108px" height="460px">
        <el-carousel-item v-for="item in imgs2" :key="item">
          <img
              :src="item"
              width="100%"
              height="100%"
              alt=""
          >
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="box" style="margin-top: 30px">
      <h1>医疗设备</h1>
    </div>
    <div class="box" style="margin-top: 30px">
      <h1>了解我们</h1>
    </div>

    <div class="container">
      <div class="col-md-12">
        <div id="blog-homepage" class="row">
          <div class="col-sm-6">
            <div class="post">
              <h4><a href="/article/list/1?typeId=1">医院公告</a></h4>
              <hr>
              <div>
                <p class="intro"><strong>[2020-01-28]</strong><a href="/article/46" style="text-decoration:none;"
                                                                 title="医院公告7">&nbsp;&nbsp;<span>医院公告7</span></a>
                </p>
              </div>
              <div>
                <p class="intro"><strong>[2020-01-27]</strong><a href="/article/26" style="text-decoration:none;"
                                                                 title="医院公告6">&nbsp;&nbsp;<span>医院公告6</span></a>
                </p>
              </div>
              <div>
                <p class="intro"><strong>[2020-01-27]</strong><a href="/article/25" style="text-decoration:none;"
                                                                 title="医院公告5">&nbsp;&nbsp;<span>医院公告5</span></a>
                </p>
              </div>
              <div>
                <p class="intro"><strong>[2020-01-27]</strong><a href="/article/24" style="text-decoration:none;"
                                                                 title="医院公告4">&nbsp;&nbsp;<span>医院公告4</span></a>
                </p>
              </div>
              <div>
                <p class="intro"><strong>[2020-01-27]</strong><a href="/article/23" style="text-decoration:none;"
                                                                 title="医院公告3">&nbsp;&nbsp;<span>医院公告3</span></a>
                </p>
              </div>
              <p class="read-more"><a style="color: white" href="/article/list/1?typeId=1"
                                      class="btn btn-primary">更多...</a>
              </p>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="post">
              <h4><a href="/article/list/1?typeId=2">医院新闻</a></h4>
              <hr>
              <div>
                <p class="intro"><strong>[2020-01-27]</strong><a href="/article/32" style="text-decoration:none;"
                                                                 title="坚定信心 坚决打赢疫情防控阻击战">&nbsp;&nbsp;<span>坚定信心 坚决打赢疫情防控阻击战</span></a>
                </p>
              </div>
              <div>
                <p class="intro"><strong>[2020-01-27]</strong><a href="/article/31" style="text-decoration:none;"
                                                                 title="医院新闻5">&nbsp;&nbsp;<span>医院新闻5</span></a>
                </p>
              </div>
              <div>
                <p class="intro"><strong>[2020-01-27]</strong><a href="/article/30" style="text-decoration:none;"
                                                                 title="医院新闻4">&nbsp;&nbsp;<span>医院新闻4</span></a>
                </p>
              </div>
              <div>
                <p class="intro"><strong>[2020-01-27]</strong><a href="/article/29" style="text-decoration:none;"
                                                                 title="医院新闻3">&nbsp;&nbsp;<span>医院新闻3</span></a>
                </p>
              </div>
              <div>
                <p class="intro"><strong>[2020-01-27]</strong><a href="/article/28" style="text-decoration:none;"
                                                                 title="医院新闻2">&nbsp;&nbsp;<span>医院新闻2</span></a>
                </p>
              </div>

              <p class="read-more"><a style="color: white" href="/article/list/1?typeId=2"
                                      class="btn btn-primary">更多...</a>
              </p>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="post">
              <h4><a href="/article/list/1?typeId=3">康复故事</a></h4>
              <hr>
              <div>
                <p class="intro"><strong>[2020-01-29]</strong><a href="/article/56" style="text-decoration:none;"
                                                                 title="康复故事5">&nbsp;&nbsp;<span>康复故事5</span></a>
                </p>
              </div>
              <div>
                <p class="intro"><strong>[2020-01-29]</strong><a href="/article/55" style="text-decoration:none;"
                                                                 title="康复故事4">&nbsp;&nbsp;<span>康复故事4</span></a>
                </p>
              </div>
              <div>
                <p class="intro"><strong>[2020-01-29]</strong><a href="/article/54" style="text-decoration:none;"
                                                                 title="康复故事3">&nbsp;&nbsp;<span>康复故事3</span></a>
                </p>
              </div>
              <div>
                <p class="intro"><strong>[2020-01-29]</strong><a href="/article/53" style="text-decoration:none;"
                                                                 title="康复故事2">&nbsp;&nbsp;<span>康复故事2</span></a>
                </p>
              </div>
              <div>
                <p class="intro"><strong>[2020-01-28]</strong><a href="/article/49" style="text-decoration:none;"
                                                                 title="康复故事1">&nbsp;&nbsp;<span>康复故事1</span></a>
                </p>
              </div>
              <p class="read-more"><a style="color: white" href="/article/list/1?typeId=3"
                                      class="btn btn-primary">更多...</a>
              </p>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="post">
              <h4><a href="/article/list/1?typeId=4">宠物大全</a></h4>
              <hr>
              <div>
                <p class="intro"><strong>[2020-01-28]</strong><a href="/article/45" style="text-decoration:none;"
                                                                 title="杜宾犬">&nbsp;&nbsp;<span>杜宾犬</span></a>
                </p>
              </div>
              <div>
                <p class="intro"><strong>[2020-01-28]</strong><a href="/article/44" style="text-decoration:none;"
                                                                 title="巴哥犬">&nbsp;&nbsp;<span>巴哥犬</span></a>
                </p>
              </div>
              <div>
                <p class="intro"><strong>[2020-01-28]</strong><a href="/article/43" style="text-decoration:none;"
                                                                 title="泰迪犬">&nbsp;&nbsp;<span>泰迪犬</span></a>
                </p>
              </div>
              <div>
                <p class="intro"><strong>[2020-01-28]</strong><a href="/article/42" style="text-decoration:none;"
                                                                 title="边境牧羊犬">&nbsp;&nbsp;<span>边境牧羊犬</span></a>
                </p>
              </div>
              <div>
                <p class="intro"><strong>[2020-01-28]</strong><a href="/article/41" style="text-decoration:none;"
                                                                 title="柴犬">&nbsp;&nbsp;<span>柴犬</span></a>
                </p>
              </div>
              <p class="read-more"><a style="color: white" href="/article/list/1?typeId=4"
                                      class="btn btn-primary">更多...</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
      activeMenuItemPath: '',
      url: '/images/img/logo3.png',
      doctors: '/images/img/dot1.jpg',
      imgs:
          [
            '/images/img/cat1.jpg',
            '/images/img/cat2.jpg',
            '/images/img/cat3.jpg',
            '/images/img/cat4.jpg',
            '/images/img/dog1.jpg',
            '/images/img/cat1.jpeg',
            '/images/img/dog2.jpeg',
            '/images/img/cat2.jpeg',
            '/images/img/dog3.jpeg',
            '/images/img/dog4.jpeg'
          ],
      imgs2: [
        '/images/img/qx1.jpg',
        '/images/img/qx2.jpg',
        '/images/img/qx3.jpg',
        '/images/img/qx4.jpg',
      ]
    }
  },
  created() {

  },
  mounted() {
    let path = this.$router.currentRoute.path;
    this.activeMenuItemPath = path;
    let lastSegment = path.substring(path.lastIndexOf('/'));
    if (lastSegment.startsWith('/spu-add-new')) {
      this.activeMenuItemPath = '/sys-admin/product/spu-add-new';
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style>

.box {
  background: #fff;
  margin: 0 0 30px;
  border: solid 1px #e6e6e6;
  padding: 20px;
  -webkit-box-shadow: 0 1px 5px rgb(0 0 0 / 10%);
  box-shadow: 0 1px 5px rgb(0 0 0 / 10%);
}

.box h1 {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 2.25rem;
  color: #4fbfa8;
  font-weight: 100;
  text-align: center;
}

.owl-carousel .owl-stage-outer {
  position: relative;
  overflow: hidden;
  -webkit-transform: translate3d(0px, 0px, 0px);
}

/*..*/
.owl-carousel .owl-item {
  position: relative;
  min-height: 1px;
  float: left;
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.col-sm-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.post {
  margin-bottom: 30px;
  background: #fff;
  margin: 0 0 30px;
  border: solid 1px #e6e6e6;
  padding: 20px;
  -webkit-box-shadow: 0 1px 5px rgb(0 0 0 / 10%);
  box-shadow: 0 1px 5px rgb(0 0 0 / 10%);
}

.col-md-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.owl-carousel .owl-item {
  position: relative;
  min-height: 1px;
  float: left;
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.container {
  max-width: 1140px;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

* {
  box-sizing: border-box;
}

p {
  font-weight: 300;
  text-align: left;
  margin-top: 0;
  margin-bottom: 1rem;
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.read-more {
  margin-top: 20px;
  text-align: center;
  margin-bottom: 1rem;
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.btn-primary {
  color: #f4f8fc;
  background-color: #4fbfa8;
  border-color: #4fbfa8;
  font-weight: 400;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 0.9rem;
  line-height: 1.5;
  border-radius: 0.25rem;
}

.container a {
  color: #4fbfa8;
  transition: all 0.3s;
  outline: none;
}

#content .product .text h3 {
  font-size: 1.125rem;
  font-weight: 700;
  height: 42px;
  text-align: center;
  overflow: hidden;
}

#content .product .text h3 a {
  color: #555;
}

.col-sm-6 {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

#advantages {
  text-align: center;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.col-md-4 {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

#advantages .box .icon {
  position: absolute;
  font-size: 120px;
  width: 100%;
  text-align: center;
  top: -20px;
  left: 0;
  height: 100%;
  float: left;
  color: #eee;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  z-index: 1;
}

#advantages .box h3 {
  position: relative;
  margin: 0 0 10px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  z-index: 2;
}

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: #4fbfa8;
  text-decoration: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  outline: none;
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
}

h3 {
  font-size: 1.53rem;
}

#hot {
  clear: both;
  margin-bottom: 20px;
}

.owl-carousel.owl-loaded {
  display: block;
}

.owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 1;
}

</style>
